<template>
  <!--头部区域-->
  <YanXuanHeader></YanXuanHeader>
  <div>
    <!--页面LOGO-->
    <div class="phoneLoginLogoWrap">
      <img class="logoImg" src="@/views/Login/images/static-union_164793255107785e.png" />
    </div>
    <!--注册账号表单-->
    <div class="messageFormWrap">
      <van-form ref="registerForm">
        <van-field placeholder="请输入手机号" type="tel" class="mt-10" v-model="registerFormData.phone" :rules="[
        { required: true, message: '请输入手机号', trigger: 'onBlur' },
        { pattern: /^1[3-9][0-9]{9}$/, message: '手机号格式不正确', trigger: 'onBlur' }]"></van-field>
        <van-field placeholder="请输入短信验证码" type="number" class="mt-10" v-model="registerFormData.code" :rules="[
        { required: true, message: '请输入验证码', trigger: 'onBlur' },
        { pattern: /\d{6}/, message: '验证码错误', trigger: 'onBlur' }]">
          <template #button>
            <van-button size="small" @click="getCode">获取验证码</van-button>
          </template>
        </van-field>
        <van-field placeholder="请输入密码" type="tel" class="mt-10" v-model="registerFormData.password" :rules="[
        { required: true, message: '请输入密码', trigger: 'onBlur' }]"></van-field>
        <van-field placeholder="请确认密码" type="tel" class="mt-10" v-model="registerFormData.confimPassword" :rules="[
        { required: true, message: '请确认密码', trigger: 'onBlur' },
        { validator: checkPassword, message: '两次密码不一致', trigger: 'onBlur' }]"></van-field>
        <!--文字和按钮区域-->
        <div class="text">
          <span class="left" href="javascript:;">已有账号?点击<routerLink to="/login"><i>登录</i></routerLink>
          </span>
        </div>
        <!--登录按钮-->
        <div class="loginBtnWrap">
          <van-button block color="#da3231" @click="toRegister">注册</van-button>
        </div>
        <!--协议复选框-->
        <van-field type="checkbox" :rules="[{ validator: isAgree, message: '协议是必须的', trigger: 'onChange' }]">
          <template #input>
            <div class="agreeWrap">
              <van-checkbox shape="square" icon-size="14px" v-model="registerFormData.checked" />
              <span class="agree">同意<a href="javascript:;">《服务条款》</a>和<a href="javascript:;">《隐私政策》</a>和<a
                  href="javascript:;">《网易严选服务协议》</a></span>
            </div>
          </template>
        </van-field>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import YanXuanHeader from '@/components/YanXuanHeader/index.vue'
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter()
const userStore = useUserStore()
const registerFormData = ref({
  phone: '',
  code: '',
  password: '',
  confimPassword: '',
  checked: true
})
//获取表单实例
const registerForm = ref()
//点击获取验证码的回调
const getCode = async () => {
  //获取请求需要的数据
  let { phone } = registerFormData.value
  if (!phone.trim()) {
    //提示信息,停止操作
    showToast('请输入手机号');
    return
  }
  //发送请求,获取数据,赋值展示到页面
  let result = await userStore.getCode(phone)
  registerFormData.value.code = result
}
//确认密码的函数
const checkPassword = (val: string) => {
  return registerFormData.value.password === val
}
//同意协议的函数
const isAgree = (val: boolean) => {
  return val
}
//点击注册按钮的回调
const toRegister = async () => {

  try {
    //验证表单数据
    await registerForm.value.validate()
    //获取表单数据
    let { phone, code, password } = registerFormData.value
    //发送请求
    await userStore.register({ phone, code, password })
    router.push('/login')
  } catch (error) {
    console.log(error)
  }




}
</script>

<style scoped>
/*登录页LOGO样式 */
.phoneLoginLogoWrap {
  padding: .7467rem 0rem 0rem;
  display: flex;
  justify-content: center;
}

.logoImg {
  width: 3.5733rem;
  height: 1.2rem;
}

/*短信登录页表单样式 */
.messageFormWrap {
  margin: .5333rem 0rem;
  padding: 0rem .2667rem;
}

/*文字和按钮区域*/
.agreeWrap {
  display: flex;
  align-items: baseline;
}

.loginBtnWrap {
  padding: 0rem .4rem;
}

.text {
  margin: .5333rem 0px .4267rem;
  padding: 0rem .4rem;
  display: flex;
  justify-content: space-between;
}

.text a,
span {
  font-size: .3733rem;

}

.text i {
  color: #007Aff;
  text-decoration: underline;
  font-style: normal;
}

.text .left {
  color: #979797;
}

.agree {
  font-size: .32rem;

}

.agree a {
  color: #007Aff;
}
</style>